<template>
  <div class="app-container">
    <el-form ref="formSearch" :model="searchForm" label-width="100px">
      <el-row>
        <el-col :span="19">
          <el-row class="form_table">
            <el-col :span="6">
              <el-form-item :label="$t('mockPage.fields1')" prop="fields1">
                <el-input v-model.trim="searchForm.fields1" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('mockPage.fields2')" prop="fields2">
                <el-input v-model.trim="searchForm.fields2" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('mockPage.fields3')" prop="fields3">
                <el-input v-model.trim="searchForm.fields3" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('mockPage.fields4')" prop="fields4">
                <el-input v-model.trim="searchForm.fields4" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('mockPage.fields5')" prop="fields5">
                <el-input v-model.trim="searchForm.fields5" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('mockPage.fields6')" prop="fields6">
                <el-date-picker v-model="searchForm.fields6" clearable type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :placeholder="$t('placeholder.select')" style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="5" style="text-align: center">
          <el-button
            type="primary"
            @click="
              searchForm.pageNum = 1
              getData()
            "
          >{{ $t('btn.query') }}</el-button>
          <el-button type="danger" @click="resetForm('formSearch')">{{ $t('btn.reset') }}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableList" border>
      <el-table-column :label="$t('mockPage.fields1')" align="center" min-width="80">
        <template slot-scope="scope">
          <span class="view" @click="editDetail('view', scope.row)">{{ scope.row.fields1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="fields2" :label="$t('mockPage.fields2')" align="center" min-width="80" />
      <el-table-column prop="fields3" :label="$t('mockPage.fields3')" align="center" min-width="80" />
      <el-table-column prop="fields4" :label="$t('mockPage.fields4')" align="center" min-width="80" />
      <el-table-column prop="fields5" :label="$t('mockPage.fields5')" align="center" min-width="80" />
      <el-table-column prop="fields6" :label="$t('mockPage.fields6')" align="center" min-width="100" show-overflow-tooltip />
      <el-table-column prop="fields7" :label="$t('mockPage.fields7')" align="center" min-width="80" />
      <el-table-column prop="fields8" :label="$t('mockPage.fields8')" align="center" min-width="80" />
    </el-table>
    <el-pagination v-show="total > 0" background :current-page.sync="searchForm.pageNum" :page-sizes="$pageSizeAll" :page-size="searchForm.pageSize" layout="total, prev, pager, next, jumper, sizes" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>
<script>
import { listData } from '@/api/list'
export default {
  name: '',
  data() {
    return {
      searchForm: {
        fields1: '',
        fields2: '',
        fields3: '',
        fields4: '',
        fields5: '',
        fields6: '',
        pageNum: 1,
        pageSize: 10,
      },
      tableList: [],
      total: 0,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.tableList = []
      this.total = 0
      this.getData()
    },
    // 查询
    getData() {
      listData(this.searchForm).then((res) => {
        if (res.code == '200') {
          this.tableList = res.data.list
          this.total = res.data.total
          return
        }
      })
    },
    // 页码改变
    handleCurrentChange(pageNum) {
      this.searchForm.pageNum = pageNum
      this.getData()
    },
    // 每页size改变时
    handleSizeChange(val) {
      this.searchForm.pageNum = 1
      this.searchForm.pageSize = val
      this.getData()
    },
  },
}
</script>
